<?php
/**
 * 注册页面内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('用户注册');

// 页面特定样式
$page_styles = <<<HTML
<style>
    .register-container {
        max-width: 550px;
        margin: 40px auto;
        padding: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 5px solid #f8f9fa;
    }
    
    .register-title {
        text-align: center;
        color: #4CAF50;
        margin-bottom: 30px;
        font-weight: bold;
    }
    
    .register-description {
        text-align: center;
        color: #666;
        margin-bottom: 30px;
        font-size: 1.1rem;
    }
    
    .register-form .form-group {
        margin-bottom: 20px;
    }
    
    .register-form .form-control {
        height: 50px;
        border-radius: 10px;
        box-shadow: none;
        border: 2px solid #e9ecef;
        padding-left: 15px;
        transition: all 0.3s ease;
    }
    
    .register-form .form-control:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
    }
    
    .register-form .btn-success {
        height: 50px;
        border-radius: 10px;
        background-color: #4CAF50;
        border-color: #4CAF50;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }
    
    .register-form .btn-success:hover {
        background-color: #3d8b40;
        border-color: #3d8b40;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
    }
    
    .form-group.row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    
    .form-group.row > div {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .form-text {
        font-size: 0.85rem;
        color: #6c757d;
        margin-top: 5px;
    }
    
    .login-link {
        text-align: center;
        margin-top: 20px;
    }
    
    .terms {
        margin-top: 20px;
        font-size: 0.9rem;
        text-align: center;
        color: #6c757d;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container">
    <div class="register-container">
        <h2 class="register-title">创建账户</h2>
        <p class="register-description">加入KidsMind，开启孩子的思维训练之旅</p>
        
        <form class="register-form" action="<?php echo asset_url('register'); ?>" method="post">
            <div class="form-group row">
                <div class="col-md-6">
                    <label for="firstName">姓名</label>
                    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="请输入您的姓名">
                </div>
                <div class="col-md-6">
                    <label for="childName">孩子昵称</label>
                    <input type="text" class="form-control" id="childName" name="childName" placeholder="请输入孩子的昵称">
                </div>
            </div>
            
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的邮箱">
                <small class="form-text">我们将通过此邮箱发送重要通知</small>
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" class="form-control" id="phone" name="phone" placeholder="请输入您的手机号码">
                <small class="form-text">用于接收验证码和重要通知</small>
            </div>
            
            <div class="form-group row">
                <div class="col-md-6">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请设置密码">
                </div>
                <div class="col-md-6">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码">
                </div>
            </div>
            
            <div class="form-group">
                <label>孩子年龄</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="childAge" id="age3-4" value="3-4" checked>
                    <label class="form-check-label" for="age3-4">3-4岁</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="childAge" id="age5-6" value="5-6">
                    <label class="form-check-label" for="age5-6">5-6岁</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="childAge" id="age7-8" value="7-8">
                    <label class="form-check-label" for="age7-8">7-8岁</label>
                </div>
            </div>
            
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="agreeTerms" name="agreeTerms" required>
                <label class="form-check-label" for="agreeTerms">我已阅读并同意KidsMind的<a href="#">服务条款</a>和<a href="#">隐私政策</a></label>
            </div>
            
            <button type="submit" class="btn btn-success w-100">注册账户</button>
        </form>
        
        <div class="login-link">
            已有账号? <a href="<?php echo page_url('login'); ?>">立即登录</a>
        </div>
        
        <div class="terms">
            <p>注册即表示您同意我们的条款、数据政策和Cookie政策。</p>
        </div>
    </div>
</div> 